<template>
  <div id="header" class="header">
    <x-header :left-options="{showBack: false}" :right-options="{showMore: false}" @on-click-more="showMenus = true">
	    <span slot="overwrite-left" style="color: white; font-weight: bold; font-size: 16px">{{company}}</span>
	    <x-icon slot="right" type="ios-search-strong" size="20" class="topSearch" @click="goSearch"></x-icon>
	    <span slot="right" @click="showMenus = true" style="color: white; font-size: 25px">+</span>
	    <!--<x-icon slot="overwrite-left" type="ios-search-strong" size="30" class="topSearch" @click="goSearch"></x-icon>-->
    </x-header>
    <div v-transfer-dom>
      <actionsheet :menus="menus" v-model="showMenus" @on-click-menu="click" show-cancel></actionsheet>
    </div>
  </div>
</template>

<script>
  import { XHeader,TransferDom,Actionsheet } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    name: 'top',
    components: {
      XHeader,
      TransferDom,
      Actionsheet
    },
    data () {
      return {
        menus: {
          createNewCustomer: '+ 创建客户',
	        createNewActivity: '+ 新建活动',
          search: '搜索'
        },
        showMenus: false,
	      company: ''
      }
    },
	  created: function () {
		  let sysTenant = this.$store.state.user.userModel.sysTenant
		  if(sysTenant != null){
			  this.company = sysTenant.company
		  }
	  },
    methods: {
    	goSearch() {
		    this.$router.push({name: 'search', params: { clearSearch: true }})
	    },
      click (key) {
	      if(key == 'createNewCustomer'){
		      this.$router.push({name: 'newCustomer'})
	      }else if(key == 'createNewActivity'){
		      this.$router.push({name: 'newActivity'})
	      }else if(key == 'search'){
		      this.$router.push({name: 'search'})
	      }
      }
    }
  }
</script>

<style>
  .vux-header {
    background-color: #44abe2 !important;
  }

  .vux-header .vux-header-right a, .vux-header .vux-header-right button{
    color: white !important;
  }

  .vux-header-title {
    margin: 0 10px !important;
  }

  .header {
    width: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
  }

	.topSearch {
		fill: #fff;
		position: relative;
		margin-right: 40px;
		top: 2px;
	}
</style>
